<template>
  <div class="container">
    <a-form
      id="components-form-demo-normal-login"
      :form="form"
      class="login-form"
      @submit="handleSubmit"
    >
      <a-form-item>
        <div class="topText">
          后台管理
          <translate tag="h1">Hello!</translate>
          <translate tag="span">world!</translate>
        </div>
      </a-form-item>
      <a-form-item has-feedback>
        <a-input
          v-decorator="[
          'username',
          { rules: [{ required: true, message: '请输入用户名' }] }
        ]"
          placeholder="用户名:admin"
        >
          <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item has-feedback>
        <a-input
          v-decorator="[
          'password',
          { rules: [{ required: true, message: '请输入密码' }] }
        ]"
          type="password"
          placeholder="密码:随意填"
        >
          <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-checkbox
          v-decorator="[
          'remember',
          {
            valuePropName: 'checked',
            initialValue: true,
          }
        ]"
        >记住用户名</a-checkbox>
        <a class="login-form-forgot" href>忘记密码?</a>
        <a-button :loading="Loading" type="primary" html-type="submit" class="login-form-button">登录</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { login } from "~/logicLib/login";

export default {
  layout: "other",
  data() {
    return {
      //world: _("world"),
      translate_test: this.$nuxt.$gettext("Hello!"),
      Loading: false
    };
  },
  created() {
    this.form = this.$form.createForm(this);
    //console.log(_("Hello!"));
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.Loading = true;
          login(this, values.username, values.password)
            .then(res => {
              console.log(res);
              if (res.status === 0) {
                this.$router.push("/");
                this.$message.success("登陆成功");
                this.Loading = false;
              } else {
                this.$message.error(res.data.msg);
                this.Loading = false;
              }
            })
            .catch(err => {
              this.Loading = false;
            });
        }
      });
    }
  }
};
</script>
<style scoped lang='less'>
.container {
  max-width: 500px;
  margin: 0px auto;
  margin-top: 10%;

  .topText {
    text-align: center;
    font-size: 30px;
  }
}

#components-form-demo-normal-login .login-form {
  max-width: 300px;
}

#components-form-demo-normal-login .login-form-forgot {
  float: right;
}

#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
</style>
